/*
 * @Author: SongXiao
 * @Date: 2023-02-27 15:39:51
 * @LastEditors: SongXiao
 * @LastEditTime: 2023-03-22 14:35:16
 * @Description: 比例尺
 */
import React, { useEffect } from 'react';
import  * as d3 from 'd3';

const WeatherChart = function(){

    useEffect(() => {
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度

        var svg = d3.select("body")   //选择文档中的body元素
        .select("svg")      //添加一个svg元素
        .attr("width", width)       //设定宽度
        .attr("height", height);    //设定高度
        
        var dataset = [ 100 , 2.1 , 1.7 , 1.3 , 0.5 ];
        var linear = d3.scaleLinear()
                .domain([0, d3.max(dataset)])
                .range([0, 100]);

        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x",20)
            .attr("y",function(d,i){
                    return i * rectHeight;
            })
            .attr("width",function(d){
                console.log(d)
                return linear(d);   //在这里用比例尺
            })
            .attr("height",rectHeight-2)
            .attr("fill","steelblue");
},[])

    return(
        <div className="weather-chart">
            <svg className="chart-show"></svg>
        </div>
    )
}

export default WeatherChart